/** 
 * 自定义的 palette 叠加到元素面板上
 */

import type { PaletteEntry, PaletteProvider } from './PaletteType';

/**
 * 自定义 palette provider
 */
class CustomPalette implements PaletteProvider {
  // 静态注入属性
  static $inject = ['palette', 'create', 'elementFactory', 'globalConnect', 'translate']

  private palette: any;
  private create: any;
  private elementFactory: any;

  constructor(palette: any, create: any, elementFactory: any) {
    this.palette = palette;
    this.create = create;
    this.elementFactory = elementFactory;
    palette.registerProvider(this);
  }

  // 这个函数是 palette 的核心
  getPaletteEntries(): Record<string, PaletteEntry> {
    const { create, elementFactory } = this;

    function createAction(type: string, group: string, className: string, title: string): PaletteEntry {
      function createListener(event: Event): void {
        const shape = elementFactory.createShape({ type });
        create.start(event, shape);
      }

      return {
        group,
        className,
        title,
        action: {
          dragstart: createListener,
          click: createListener
        }
      }
    }

    return {
      'create.start-task': createAction(
        'bpmn:StartEvent',
        'model',
        'icon-custom lindaidai-task',
        '开始事件'
      ),
      'create.end-task': createAction(
        'bpmn:EndEvent',
        'model',
        'icon-custom lindaidai-task',
        '结束事件'
      ),
      'create.user-task': createAction(
        'bpmn:UserTask',
        'model',
        'icon-custom lindaidai-task',
        '用户任务'
      ),
    }
  }
}

export default {
  __init__: ['customPalette'],
  customPalette: ['type', CustomPalette]
}